<!DOCTYPE html>
<html>
  <head>
    <title>cannon.js - friction demo</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  </head>
  <body>
    <script src="../build/cannon.js"></script>
    <script src="../build/cannon.demo.js"></script>
    <script src="../libs/dat.gui.js"></script>
    <script src="../libs/Three.js"></script>
    <script src="../libs/TrackballControls.js"></script>
    <script src="../libs/Detector.js"></script>
    <script src="../libs/Stats.js"></script>
    <script src="../libs/smoothie.js"></script>
    <script>

    /**
     * Demonstrates how to make several materials with different friction properties.
     */

      var demo = new CANNON.Demo(), size = 1.0;

      demo.addScene("Friction",function(){
        var shape = new CANNON.Box(new CANNON.Vec3(size,size,size));

        // Create world
        var world = demo.getWorld();
        world.broadphase = new CANNON.NaiveBroadphase();
        world.iterations = 10;

        // Materials
        var groundMaterial = new CANNON.Material("groundMaterial");

        // Adjust constraint equation parameters for ground/ground contact
        var ground_ground_cm = new CANNON.ContactMaterial(groundMaterial, groundMaterial, {
            friction: 0.4,
            restitution: 0.3,
            contactEquationStiffness: 1e8,
            contactEquationRelaxation: 3,
            frictionEquationStiffness: 1e8,
            frictionEquationRegularizationTime: 3,
        });

        // Add contact material to the world
        world.addContactMaterial(ground_ground_cm);

        // ground plane
        var groundShape = new CANNON.Plane();
        var groundBody = new CANNON.Body({ mass: 0, material: groundMaterial });
        groundBody.addShape(groundShape);
        world.addBody(groundBody);
        demo.addVisual(groundBody);

        // Create a slippery material (friction coefficient = 0.0)
        var slipperyMaterial = new CANNON.Material("slipperyMaterial");

        // The ContactMaterial defines what happens when two materials meet.
        // In this case we want friction coefficient = 0.0 when the slippery material touches ground.
        var slippery_ground_cm = new CANNON.ContactMaterial(groundMaterial, slipperyMaterial, {
            friction: 0,
            restitution: 0.3,
            contactEquationStiffness: 1e8,
            contactEquationRelaxation: 3
        });

        // We must add the contact materials to the world
        world.addContactMaterial(slippery_ground_cm);

        // Create slippery box
        var boxBody = new CANNON.Body({ mass: 1, material: slipperyMaterial });
        boxBody.addShape(shape);
        boxBody.position.set(0,0,5);
        world.addBody(boxBody);
        demo.addVisual(boxBody);

        // Create box made of groundMaterial
        var boxBody2 = new CANNON.Body({ mass: 10, material: groundMaterial });
        boxBody2.addShape(shape);
        boxBody2.position.set(size*4,0,5);
        world.addBody(boxBody2);
        demo.addVisual(boxBody2);

        // Change gravity so the boxes will slide along x axis
        world.gravity.set(-3,0,-60);
      });

      demo.start();

    </script>
  </body>
</html>
